<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>兄弟组件通信</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<div id="container">
    <p>{{msg}}</p>
    <xiongda></xiongda>
    <hr>
    <xionger></xionger>
</div>
<script>
    /*
        借助于一个公共的Vue的实例对象，不同的组件可以通过该对象完成事件的绑定和触发
        new一个对象（中央事件总线），兄弟间的通信，将借助他事件绑定和触发来实现
        使用总线要注意【组件】的加载方式
        1. 兄弟组件，同时加载
        2. 路由跳转，由于事件机制是需要先监听再出发，而且‘弟弟’组件和‘哥哥’组件的创建/销毁有先后，所以要在‘弟弟’组件创建前先监听，然后‘哥哥’组件再销毁时触发
            A created
            A before mount
            A mounted
            B before created
            B created
            B before mounted
            A before destroy
            A destroyed
            B mounted
            B before update
            B update


        【【【重要的注意事项：总线注册的事件，在组件销毁时必须卸载, 以免重复调用】】】】
        beforeDestroy () {
            this.bus.$off('updateData', this.getData);
        }
    */

    //事件总线实现方式 有三种方式
    /*
        1. 将bus 单独抽离一个js中，使用的地方单独引入
            - Bus.js
            import Vue from 'vue'
            const Bus = new Vue()
            export default Bus

            - 组件内
            import Bus from './Bus'
            .....
            methods: {
                ....
                Bus.$emit('log', 120)
            }
            ....

        2 new一个总线，直接放到vue的data中使用
            import Vue from 'vue'
            const Bus = new Vue()

            var app= new Vue({
                el:'#app',
            　　 data:{
            　　　　Bus
                }　　

            })

            组件中
            this.$root.bus.$on('selfEvent');
            this.$root.bus.$emit('selfEvent', data);

         3. 将bug抽离到一个js中，使用install机制把bug.js 作为一个插件放入vue
            // plugin/index.js
            import Bus from 'vue';
            let install = function (Vue) {
                ... ...
                // 设置eventBus
                Vue.prototype.bus = new Bus();
                ... ...
            }

            export default {install};

            // main.js
            import Vue from 'vue';
            import plugin from './plugin/index';
            ... ...

            Vue.use(plugin);

            组件中
            this.bus.$on('selfEvent');
            this.bus.$emit('selfEvent', data);
     */


    var bus = new Vue();
    //组件1发送消息给组件2
    //xiongda组件
    Vue.component("xiongda",{
        data:function(){
            return {
                xiongDaInput:""
            }
        },
        methods:{
            sendToXiongEr:function(){
                //给组件2发送消息
                //触发msgToXiongEr事件
                bus.$emit("msgToXiongEr",this.xiongDaInput);
                this.xiongDaInput = "";
            }
        },
        template:`
                <div>
                    <h1>我是组件1</h1>
                    <input type="text" v-model="xiongDaInput"/>
                    <button @click="sendToXiongEr">Click Me</button>
                </div>
            `
    })
    //组件2组件
    Vue.component("xionger",{
        data:function(){
            return{
                recvMsgIs:[]
            }
        },
        template:`
                <div>
                    <h1>我是组件2</h1>
                    <p v-for="tmp in recvMsgIs">{{tmp}}</p>
                </div>
            `,
        mounted:function(){
//            给该组件绑定一个自定义事件和对应的处理函数
            //调用bus中的on方法
            //事件的触发一般是接收数据然后处理
            var that = this;
            bus.$on("msgToXiongEr",function(msg){
                //alert("自定义的事件触发，接收到的数据"+msg);
                that.recvMsgIs.push(msg);
            })
        }
    })
    new Vue({
        el:"#container",
        data:{
            msg:"Hello VueJs"
        }
    })
</script>
</body>
</html>
